<!-- 国际服务器注册 -->
<template>
  <div class="template-content">
    <SearchHeader v-model="queryParam.where.keyword" @handleSearch="getData" @handleAdd="add" @handleInit="queryParam.init">
      <Row :gutter="4">
        <Col span="5"><Input :placeholder="$t('code')" v-model="queryParam.where.code"></Input> </Col>
        <Col span="5"><Input :placeholder="$t('name')" v-model="queryParam.where.name"></Input> </Col>
        <Col span="5"><Input placeholder="ip" v-model="queryParam.where.host"></Input> </Col>
        <Col span="3">
          <Select :placeholder="$t('online')" v-model="queryParam.where.online">
            <Option value=null>{{$t('all')}}</Option>
            <Option value=1>{{$t('online')}}</Option>
            <Option value=0>{{$t('offline')}}</Option>
          </Select>
        </Col>
      </Row>
    </SearchHeader>
    <Card>
      <Table border :columns="columns" :data="tableData">
        <template slot-scope="{ row, index }" slot="action">
          <Button type="default" :Title="$t('browse')" icon="md-list-box" style="margin-right: 5px" @click="view(row)"></Button>
          <Button type="default" :Title="$t('edit')" icon="md-create" style="margin-right: 5px" @click="edit(row)"></Button>
          <Button type="default" :Title="$t('delete')" icon="md-trash" @click="remove(row)"></Button>
        </template>
        <template slot-scope="{ row, index }" slot="online">
          <span v-if="row.online==1" style="color: green" >{{$t('online')}}</span>
          <span v-if="row.online!=1" style="color: red">{{$t('offline')}}</span>
        </template>
      </Table>
      <TopnavPage v-model="queryParam.page" @on-change="changePage"></TopnavPage>
    </Card>
    <GbServerEdit ref="gbServerEdit"></GbServerEdit>;
  </div>
</template>
<script>
import {queryPage,removeGbServer} from '@/api/gbserver';
import TopnavPage from "_c/topnav/TopnavPage";
import SearchHeader from "@/view/Common/SearchHeader";
import GbServerEdit from "@/view/GbServer/GbServerEdit";
import {apiResult, clone} from '@/libs/util'
export default {
  name: 'GbServer',
  components: {TopnavPage,SearchHeader,GbServerEdit},
  computed:{
    columns(){
      return [
        {title: this.$t('operate'), key: 'action', width: 150,slot: 'action',align: 'center'},
        {title: this.$t('code'), key: 'code', sortable: true, width: 200},
        {title: this.$t('name'), key: 'name', sortable: true, width: 200},
        {title: 'IP', key: 'host', sortable: true, width: 200},
        {title: this.$t('port'), key: 'port', sortable: true, width: 100},
        {title: this.$t('domain'), key: 'domain', sortable: true, width: 200},
        {title: this.$t('user'), key: 'userName', sortable: true, width: 150},
        {title: this.$t('password'), key: 'passwrd', sortable: true, width: 150},
        {title: this.$t('online'), key: 'online', sortable: true, width: 100,slot:'online',align: 'center'}
      ]
    }
  },
  data() {
    return {
      advancedSearch:false,
      tableData: [],
      queryParam: {
        page: {
          desc: ['create_time'],
          pages: 0,
          size: 10,
          total: 0,
          current: 1,
        },
        where: {keyword:null,code: null, name: null, host: null, domain: null, online:null},
        init: ()=>{
          let _that = this;
          this.queryParam.where.keyword=null;
          this.queryParam.where.code=null;
          this.queryParam.where.name=null;
          this.queryParam.where.host=null;
          this.queryParam.where.domain=null;
          this.queryParam.where.online=null;
        }
      },

    }
  },
  methods: {
    getData() {
      /** 生成查询条件 */
      queryPage(JSON.stringify(this.queryParam)).then(res => {
        this.tableData = null;
          apiResult(res.data,false,result=> {
            this.queryParam.page.total = result.data.total;
            this.tableData = result.data.records;
          })
      })
    },
    changePage(){
      this.getData();
    },
    add() {
      let newRow={
        id:null,
        code:null,
        name:null,
        host:null,
        port:null,
        domain:null,
        userName:null,
        passwrd:null,
        mediaPort:null,
        apiPort:null,
        cityId:null,
        businessId:null,
        netIdentityId:null,
        centerTypeId:null,
        deviceTypeId:null,
        cityName:null,
        businessName:null,
        netIdentity:null,
        centerTypeName:null,
        deviceTypeName:null,
      }
      clone(newRow);
      this.$refs.gbServerEdit.openDialog("ADD",null, this.getData);
    },
    edit(row) {

      this.$refs.gbServerEdit.openDialog("EDIT",clone(row), this.getData);
    },
    view(row) {
      clone(row);
      this.$refs.gbServerEdit.openDialog("VIEW",clone(row), this.getData);
    },
    remove(row){
      this.$Modal.confirm({
          title: this.$t('delete_confirm'),
          content: this.$t('delete_make_sure'),
          onOk: (() => {
            let result = removeGbServer(JSON.stringify(row));
            result.then(res => {
              apiResult(res.data,true,result=>{this.getData();});
            })
          }),
          onCancel: (() => {
          })
        });
    },

  },
  mounted() {
    this.getData();
  }
}
</script>
<style lang="less">
//@import "../../my-theme/template";
</style>
